﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="/Images/ico/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link type="text/css" rel="stylesheet" href="/layui/css/layui.css"  media="all">
<script type="text/javascript" src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/swiper.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/layui-post.js"></script>
<script type="text/javascript" src="/js/clipboard.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=EZPCgQ6zGu6hZSmXlRrUMTpr"></script>
<style type="text/css">
.layui-layer-content{background:#fff}
.layui-layer-nobg{border-radius: 10px 10px 0 0!important;}
.layui-layer-title{border-radius: 10px 10px 0 0!important;}
.white-color{background: #fff;border-radius: 7px;}
.zidaaress::after{content: '';background: url("/img/copy_1.png");width: 16px;height: 16px;display: inline-block;background-size: cover;margin-left: 5px;vertical-align: sub;}
</style>
</head>
<body style="background: #F0F0F0;padding: 10px;">
    <div class="ng-scope">
        <header class="ng-scope" id="gwc">
            <h4 class="title-order">
                <a class="title-top" href="javascript:window.history.back();"></a>
                <a class="title-center">订单详情</a>
                <a class="title-right" href="/index"></a>
            </h4>
        </header>
        <div class="orderno ng-binding ng-scope white-color" style="margin-top: 50px;font-size: 20px;font-weight: bold;">
            <span id="orderstatus"></span><a onclick="showOrderLog()" class="title-top" style="float: right; height: 30px; background: url(/img/left.png) 10px center no-repeat; background-size: 16px; display: inline-block; width: 20%; text-align: right;transform: rotate(180deg);"></a>
            <div id="orderstatusa" style="display: none;font-size: 12px;font-weight: 100;margin-top: 10px;">感谢您对本店外卖的信任，期待再次光临。</div>
            <div id="orderlocation" style="display:none;height:250px;width: 100%;margin-top: 20px;border-radius: 10px;"></div>
            <div style="margin-top:30px;text-align: right;">
                <button id="replayBack" class="layui-btn layui-btn-danger layui-btn-sm" style="display:none;border-radius: 20px;">申请退款</button>
                <a href="tel:15978581514" class="layui-btn layui-btn-primary layui-btn-sm" style="border-radius: 20px;">联系商家</a>
            </div>
        </div>
        <div class="white-color" style="margin-top: 10px;">
            <p class="orderno ng-binding ng-scope" style="font-size: 14px;font-weight: bold;">订单号：<span id="orderno"></span></p>
            <div class="top-pay ng-scope peisong" style="border-radius: 5px;margin:10px 0 10px 0"></div>
        </div>
        <div class="bottom-pay ng-scope white-color" style="padding: 0;">
            <div class="paytype">
                <p style="font-size: 14px;font-weight: bold;padding: 10px;">商品费用</p>
            </div>
            <section class="prolist_section" style="padding-bottom: 0;margin-top: 10px;">
                <ul id="prolist" class="lists white-color" style="padding: 10px;display: flow-root;"></ul>
            </section>
        </div>
    </div>
</body>
<!-- 物流跟踪 -->
<div class="modal-dialog" id="orderLog" style="font-size:16px;border-radius: 10px;display: none;background: #fff;padding: 30px;">
    <ul class="layui-timeline" id="orderwl">
    </ul>
</div>
<script>
$.ajaxSetup({contentType: "application/json; charset=utf-8"});
var userInfo = $.parseJSON(sessionStorage.getItem("userInfo"));
var map = new BMap.Map("orderlocation"),marker2,startLng = 114.531303,startLat = 32.209575
var oTime,distance,pt_end,pt;
var points = []
layui.use(['layer','form','element','util'], function(){
    points.push(new BMap.Point(startLng,startLat))
    $.post(geturl()+'/enums/select?token='+sessionStorage.getItem("token"), JSON.stringify({parentEnumCode:"ORDER_STATUS",orderByAscType:"enumCode"}), function (res) {
        enumsData = res.data
    }).done(function(){
        $.post("/cateringOrder/selectOrder",JSON.stringify({sysId:getQueryString("orderId")}),function(res){
            //创建起点
            $("#prolist").html("")
            for(var i in res.data){
                if(res.data[i].orderStatus == "ORDER_STATUS_05") {
                    getLocation()
                    oTime = setInterval(getLocation,5000)
                    $("#orderlocation").show()
                }
                var pt_start = new BMap.Point(startLng,startLat);
                var startIcon = new BMap.Icon("/img/start.png", new BMap.Size(36,36));
                var markerStrat = new BMap.Marker(pt_start,{icon:startIcon});  // 创建标注
                map.addOverlay(markerStrat);             // 将标注添加到地图中

                //创建终点
                pt_end =  new BMap.Point(res.data[i].longitude,res.data[i].latitude)//new BMap.Point(115.559445,22.859811);
                var endIcon = new BMap.Icon("img/end.png", new BMap.Size(36,36));
                var markerEnd = new BMap.Marker(pt_end,{icon:endIcon});  // 创建标注
                map.addOverlay(markerEnd);             // 将标注添加到地图中

                map.centerAndZoom(pt_start,15);
                map.enableScrollWheelZoom();

                $("#orderstatus").html(getOrderStatus(res.data[i].status,res.data[i].orderStatus,res.data[i].sendType));
                // 订单状态为完成时显示感谢语
                if(res.data[i].orderStatus.split("_")[2] >= 24 && res.data[i].orderStatus.split("_")[2] < 99) $("#orderstatusa").show()
                // 订单状态为已支付，物流状态为1，未确认时显示退款
                if(res.data[i].status == 1 && res.data[i].orderStatus == "ORDER_STATUS_20" && res.data[i].isSure == 0) $("#replayBack").show()
                $("#orderno").html(res.data[i].orderNo);
                if(res.data[i].sendType == 1){
                    $(".peisong").show().append(
                        '<p class="ng-binding" style="line-height: 30px;"><div style="float: left;width: 20%;height: 30px;line-height: 30px;">收货信息：</div><div style="float: right;width: 80%;text-align: right;height: 30px;line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ">'+res.data[i].person+' '+res.data[i].telPhone+'</div></p>' +
                        '<p class="ng-binding" style="line-height: 30px;"><div style="width: 100%;line-height: 30px;display: flow-root;"><div style="float: left;width: 20%;">配送地址：</div><div style="float: right;width: 80%;text-align: right;" class="zidaaress">'+res.data[i].address+" "+res.data[i].detail+'</div></div></p>' +
                        '<p class="ng-binding" style="line-height: 30px;"><div style="float: left;width: 20%;height: 30px;line-height: 30px;">订单备注：</div><div style="float: right;width: 80%;text-align: right;height: 30px;line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ">'+(isEmpty(res.data[i].remark)?"":res.data[i].remark)+'</div></p><div style="clear:both;"></div>'
                    )
                }else{
                    $(".peisong").show().append(
                        '<p class="ng-binding" style="line-height: 30px;"><div style="width: 100%;line-height: 30px;display: flow-root;"><div style="float: left;width: 20%;">自取地址：</div><div style="float: right;width: 80%;text-align: right;" class="zidaaress">宝城街道办事处行政中路233号-美味鸡蛋仔</div></div></p>' +
                        '<p class="ng-binding" style="line-height: 30px;"><div style="float: left;width: 20%;height: 30px;line-height: 30px;">自取时间：</div><div style="float: right;width: 80%;text-align: right;height: 30px;line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ">'+res.data[i].sendTime+'</div></p>' +
                        '<p class="ng-binding" style="line-height: 30px;"><div style="float: left;width: 20%;height: 30px;line-height: 30px;">预留电话：</div><div style="float: right;width: 80%;text-align: right;height: 30px;line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ">'+(isEmpty(res.data[i].remark)?"":res.data[i].remark)+'</div></p><div style="clear:both;"></div>'
                    )
                }
                $(".peisong").append(
                    '<p class="ng-binding" style="line-height: 30px;"><div style="float: left;width: 20%;height: 30px;line-height: 30px;">下单时间：</div><div style="float: right;width: 80%;text-align: right;height: 30px;line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ">'+res.data[i].createTime+'</div></p><div style="clear:both;"></div>'
                )
                var heji = 0;
                for(var j in res.data[i].cartList){
                    let yxgg = !isEmpty(res.data[i].cartList[j].spacesName) ? '<p class="t" style="font-size: 10px;margin-top: 6px;">已选规格：'+res.data[i].cartList[j].spacesName+'</p>': ""
                    heji += (res.data[i].cartList[j].goodsNum/1)*(res.data[i].cartList[j].goodsPrice/1)
                    $("#prolist").append(
                        '<li price="'+res.data[i].cartList[j].goodsPrice+'" goodnum="'+res.data[i].cartList[j].goodsNum+'" class="on" goodsId="'+res.data[i].cartList[j].goodsId+'" internum="'+res.data[i].cartList[j].interNum+'">' +
                        '<div class="l" style="width: 28%;">' +
                        '<a><img style="border-radius:10px;" src="'+res.data[i].cartList[j].goodsImg+'" class="img-responsive" alt="..." /></a>' +
                        '</div>' +
                        '<div class="r" style="width: 72%;">' +
                        '<p class="t">'+res.data[i].cartList[j].goodsName+'</p>' +
                        '<p class="price" style="float:none;">￥'+res.data[i].cartList[j].goodsPrice+'</p>' +
                        yxgg +
                        // '<div class="jifen">送积分：'+res.data[i].cartList[j].interNum+'</div>' +
                        '<div class="jifen">x'+res.data[i].cartList[j].goodsNum+'</div>' +
                        '</div>' +
                        '</li>'
                    )
                }
                $("#prolist").append(
                    '<li style="min-height: 0;height: auto;display: flow-root;">' +
                    '<div class="l" style="font-size: 14px;padding: 5px 0;">打包费</div>' +
                    '<div class="r" style="text-align: right;font-size: 14px;padding: 5px 0;">' +
                    '<p class="t"><span style="margin-right: 1px;font-size: 12px;color: #6b6868;">￥</span>0.00</p>' +
                    '</div>' +
                    '</li>'
                ).append(
                    '<li style="min-height: 0;height: auto;display: flow-root;">' +
                    '<div class="l" style="font-size: 14px;padding: 5px 0;">商家配送费</div>' +
                    '<div class="r" style="text-align: right;font-size: 14px;padding: 5px 0;">' +
                    '<p class="t"><span style="margin-right: 1px;font-size: 12px;color: #6b6868;">￥</span>0.00</p>' +
                    '</div>' +
                    '</li>'
                ).append(
                    '<li style="min-height: 0;height: auto;display: flow-root;">' +
                    '<div class="l" style="font-size: 1rem;padding: 10px 0;font-weight: bold;">合计</div>' +
                    '<div class="r" style="text-align: right;">' +
                    '<p class="t" style="color: red;"><span style="margin-right: 1px;font-size: 12px;color: #6b6868;">￥</span>'+heji.toFixed(2)+'</p>' +
                    '</div>' +
                    '</li>'
                )
                $("#orderwl").html("")
                for(var k in res.data[i].logList){
                    var fontw = (k == res.data[i].logList.length-1 ? "font-weight:bold;" : "");
                    var iconw = (k == res.data[i].logList.length-1 ? "font-size:10px;" : "font-size:8px;color:black;");
                    $("#orderwl").append(
                        '<li class="layui-timeline-item">' +
                        '<i class="layui-icon layui-timeline-axis" style="'+iconw+'">&#xe617;</i>' +
                        '<div class="layui-timeline-content layui-text">' +
                        '<h3 class="layui-timeline-title" style="font-size:16px;'+fontw+'">订单'+getWlstatus(res.data[i].logList[k].orderStatus)+'<span style="float:right;">'+res.data[i].logList[k].createTime.substring(5).replace("-","月").replace(" ","日 ")+'</span></h3>' +
                        '<p></p>' +
                        '</div>' +
                        '</li>'
                    )
                }
                $("#replayBack").click(function(){
                    layer.confirm('确认申请退款吗？',function(index){
                        layer.closeAll()
                        if(res.data[i].payMoney > 0){
                            $.post(getHttp()+"/wxapi/catering/api/refund", JSON.stringify({orderId:getQueryString("orderId")}), function(res) {
                                if(res.success) layer.msg("退款成功",{icon:1,time:1500},function(){window.location.reload()})
                                else layer.msg("退款失败",{icon:1,time:1500})
                            })
                        }else{
                            $.post("/cateringOrder/updateStatus",JSON.stringify({sysId:getQueryString("orderId"),status:3,orderStatus:'ORDER_STATUS_99'}),function(){
                                layer.msg("退款成功",{icon:1,time:1500},function(){window.location.reload()})
                            })
                        }
                    });
                })
            }
        }).done(function(){
            $(".zidaaress").click(function (event){
                event.preventDefault();
                event.stopPropagation()
                copyToClipboard($(this).html())
                // navigator.clipboard.writeText($(this).attr("data-value")).then(function() {
                //     layer.msg('地址复制成功',{icon:1,time:1000});
                // }).catch(function(err) {
                //     console.error('复制文本失败', err);
                // });
            })
        })
    })
})

//物流状态
function getWlstatus(s){
    return enums(s,'ORDER_STATUS');
}
function getOrderStatus(pays,orders,sendType){
    if(pays == 0) return "待支付";
    else if(pays == 2) return "已取消";
    else if(pays == 3) return "已退款";
    else if(pays == 1) {
        return enums(orders,'ORDER_STATUS');
        if(sendType == 1){
            if(orders == 0) return "待确认";
            else if(orders == 1) return "待配送";
            else if(orders == 2) return "配送中";
            else if(orders == 3) return "待收货";
            else if(orders == 4) return "待评价";
            else if(orders == 5) return "已完成";
            else return "已退款";
        } else {
            if(orders == 0) return "待确认";
            else if(orders == 1) return "待配送";
            else if(orders == 2) return "待自取";
            else if(orders == 3) return "待收货";
            else if(orders == 4) return "待评价";
            else if(orders == 5) return "已完成";
            else return "已退款";
        }
    }
}
function enums(s,enumCode){
    for(var key in enumsData[enumCode]) if(key === s) return enumsData[enumCode][s];
}
function showOrderLog(){
    layer.open({
        type:1,
        area: ['100%', '40%'],
        title:["订单跟踪", 'text-align:center;font-size: 16px; font-weight: bold;padding-left: 80px;'],
        closeBtn:1,
        btnAlign: 'c',
        offset: 'b',
        anim: 2,
        skin:'layui-layer-nobg',
        shadeClose:true,
        content:$("#orderLog"),
        scrollbar:false,
    })
}
function getLocation(){
    var geolocation = new BMap.Geolocation(); // 创建定位实例
    geolocation.getCurrentPosition(function(position){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var lat = position.point.lat; // 获取纬度
            var lng = position.point.lng; // 获取经度
            console.log("当前位置的经度：" + lng + ", 纬度：" + lat);
            points.push(new BMap.Point(lng,lat))
            pt = new BMap.Point(lng,lat)
            map.removeOverlay(marker2)
            var myIcon = new BMap.Icon("img/car.gif", new BMap.Size(100,160),{    //小车图片
                //offset: new BMap.Size(0, -5),    //相当于CSS精灵
                //imageOffset: new BMap.Size(-20, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
            });
            marker2 = new BMap.Marker(new BMap.Point(lng,lat),{icon:myIcon});  // 创建标注
            map.addOverlay(marker2);  // 将标注添加到地图中*/

            distance = meterTokm(Math.ceil(map.getDistance(pt,pt_end)));
            var label = new BMap.Label("还距您"+distance,{offset:new BMap.Size(0,-30)});
            label.setStyle({
                fontSize : "0.6em",
                border:0,
                fontFamily:"微软雅黑",
                "border-radius":"20px",
                padding:"0.3em 0.4em"
            });
            marker2.setLabel(label);
            map.centerAndZoom(pt,13);
            if(distance==0){
                var polyline = new BMap.Polyline(points);//创建折线
                map.addOverlay(polyline);//覆盖折线到地图上
                clearInterval(oTime);
                map.centerAndZoom(pt_end,13);
            }
        } else {
            console.log('failed' + this.getStatus());
        }
    }, {enableHighAccuracy: true}); // 启用高精度定位
}
function copyToClipboard(textToCopy) {
    // navigator clipboard 需要https等安全上下文
    if (navigator.clipboard && window.isSecureContext) {
        // navigator clipboard 向剪贴板写文本
        navigator.clipboard.writeText(textToCopy).then(function() {
            layer.msg('地址复制成功',{icon:1,time:1000});
        }).catch(function(err) {console.error('复制文本失败', err);});
    } else {
        // document.execCommand('copy') 向剪贴板写文本
        let input = document.createElement('input')
        input.style.position = 'fixed'
        input.style.top = '-10000px'
        input.style.zIndex = '-999'
        document.body.appendChild(input)
        input.value = textToCopy
        input.focus()
        input.select()
        try {
            let result = document.execCommand('copy')
            document.body.removeChild(input)
            if (!result || result === 'unsuccessful') {
                console.log('复制失败')
            } else {
                layer.msg('地址复制成功',{icon:1,time:1000});
            }
        } catch (e) {
            document.body.removeChild(input)
            alert('当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作')
        }
    }
}
function meterTokm(meters){
    var km = meters / 1000; // 转换为千米
    // 判断是否需要显示千米
    if (km >= 1) {
        // 如果大于或等于1千米，则显示千米，保留两位小数
        return (km.toFixed(2) + '千米');
    } else {
        // 如果小于1千米，则显示米，保留整数
        return (meters + '米');
    }
}
</script>
</html>
